<template>
    <div class="v-rushHour">
        <Card :bordered="true" class="mt28">
            <p slot="title">总流量高峰时段</p>
            <div slot="extra">
                <Dropdown trigger="custom" :visible="visible" class="v-dropdown" @on-clickoutside="handleClose" style="min-width: 240px;" placement="top-end">
                  <span @click="handleOpen">
                      门店筛选
                      <Icon type="arrow-down-b"></Icon>
                  </span>
                  <DropdownMenu slot="list">
                      <CheckboxGroup v-model="areaNameCheck">
                          <Checkbox v-for="(item, index) in searchAreas" :label="item.areaName" :key="index"></Checkbox>
                      </CheckboxGroup>
                      <div style="text-align: right; margin:10px;">
                          <Button type="primary" @click="handleSubmit">确定</Button>
                      </div>
                  </DropdownMenu>
                </Dropdown>
              </div>
            <div id="rushHour2"></div>
        </Card>
    </div>
</template>

<script>
import { mapState } from 'vuex'
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/heatmap');
require("echarts/lib/chart/scatter");
require("echarts/lib/component/calendar");
require("echarts/lib/component/visualMap");

export default {
  name: "v-rushHour",
  props: {},
  data() {
      return {
          searchAreas: [],
          areaName: '',
          areaCode: '',
          visible: false,
          areaNameCheck: [],

      }
  },
  created() {
    this.SearchAreas()
  },
  computed: {
    ...mapState({
      sideBarWidth: state => state.sideBarWidth,
      getAjaxParams: state => state.timeParams
    })
  },
  watch: {
      getAjaxParams(val) {
        if (this.areaCode !== '') {
          this.RushHourData(Object.assign({}, val, {areaCodes: this.areaCode}))
          this.$store.dispatch(
            'SetDownLink',
          Object.assign({},val, {areaCodes: this.areaCode}))
        }
      },
      sideBarWidth (val) {
        setTimeout(() => {
          this.myChart.resize()
        }, 200)
      }
  },
  mounted() {},
  methods: {
    RushHourData(params) {
      this.$store.dispatch('RushHourData', params).then((res) => {
        if (res.success === '1') {
          var json = res;
          //日期转换时间
          function dateToWeekDay(dateStr) {
            var myDate = new Date(Date.parse(dateStr.replace(/-/g, "/")))
            return myDate.getDay();
          }
          this.myChart = echarts.init(document.getElementById('rushHour2'))
          var app = {};
          var option = null;
          app.title = '笛卡尔坐标系上的热力图';

          var jsonData = json["data"];
          var hours = []
          for(var v in jsonData){
            var dataNum = jsonData[v]["date"].replace(/-/g,"")
            hours[dataNum]=jsonData[v]["date"];
          }
          var t = []
          for(var v in hours){
            t.push(hours[v])
          }
          var hours = t
          var days = ['0:00~0:59', '1:00~1:59', '2:00~2:59', '3:00~3:59', '4:00~4:59',
            '5:00~5:59', '6:00~6:59',
            '7:00~7:59', '8:00~8:59', '9:00~9:59', '10:00~10:59', '11:00~11:59',
            '12:00~12:59', '13:00~13:59',
            '14:00~14:59', '15:00~15:59', '16:00~16:59', '17:00~17:59', '18:00~18:59',
            '19:00~19:59', '20:00~20:59',
            '21:00~21:59', '22:00~22:59', '23:00~23:59'
          ];
          days.reverse();

          function checkDateInArrNUM(date,hours){
            for(var i=0;i<hours.length;i++){
              if(date==hours[i]){
                return i;
              }
            }
          }

          //整理data数据
          var _data = [];
          var maxEnters = 0
          var jsonData = json["data"];
          for (var v in jsonData) {
            maxEnters = parseInt(jsonData[v]["enters"]) > maxEnters ? parseInt(jsonData[v][
                "enters"
            ]) : maxEnters;

            var item = [days.length - 1 - parseInt(jsonData[v]["hour"]), checkDateInArrNUM(jsonData[v]["date"],hours), parseInt(jsonData[v]["enters"])]

            _data.push(item);
          }
          var data = _data;

          data = data.map(function (item) {
            return [item[1], item[0], item[2] || '-'];
          });

          option = {
            animation: false,
            grid: {
              top: '5px',
              right: '20px',
              left: '100px'
            },
            xAxis: {
              type: 'category',
              data: hours,
              splitArea: {
                show: true
              }
            },
            yAxis: {
              type: 'category',
              data: days,
              splitArea: {
                show: true
              }
            },
            visualMap: {
              min: 0,
              max: maxEnters,
              calculable: false,
              show: false,
              pieces: [                           
                {min: 0 , max: 10 ,color: '#FCEDE8'},
                {min: 10 , max: 20 ,color: '#FADCD4'}, 
                {min: 20 , max: 30 ,color: '#F9DBD9'},
                {min: 30 , max: 40 ,color: '#F8CABD'},
                {min: 40 , max: 50 ,color: '#EE947A'},
                {min: 50 , max: 60 ,color: '#F0947B'},
                {min: 60 , max: 70 ,color: '#EA714E'},
                {min: 70 , max: 80 ,color: '#EA714E'},
                {min: 80 ,color: '#E44D22'}
              ]
            },
            series: [{
              name: 'Punch Card',
              type: 'heatmap',
              data: data,
              label: {
                normal: {
                  show: true,
                  color: '#000000'
                }
              },
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }]
          };
          this.myChart.setOption(option, true)
          setTimeout(() => {
            window.onresize = this.myChart.resize
          }, 200)
        }
      })
    },
    SearchAreas () {
      this.$store.dispatch('SearchAreas').then((res) => {
        if (res.success === '1') {
          this.searchAreas = res.data
          let _areaNameCheck = []
          let _areaCode = []
          this.searchAreas.map((item) => {
            _areaNameCheck.push(item.areaName)
            _areaCode.push(item.areaCode)
          })
          this.areaNameCheck = _areaNameCheck
          this.areaCode = _areaCode.join(',')
          this.areaName = this.areaNameCheck.join(',')
          this.$store.dispatch('SetAreaParams', {
            areaCode: this.areaCode
          })
          this.RushHourData(Object.assign({}, this.getAjaxParams, {areaCodes: this.areaCode}))
          this.$store.dispatch('SetDownLink', Object.assign({}, this.getAjaxParams, {areaCodes: this.areaCode}))
        }
      })
    },
    handleOpen () {
      this.visible = true
    },
    handleClose () {
      this.visible = false
    },
    handleSubmit () {
      let _areaCode = []
      this.areaNameCheck.map((item) => {
        this.searchAreas.map((subItem) => {
          if (item === subItem.areaName) {
            _areaCode.push(subItem.areaCode);
          }
        })
      })
      this.areaName = this.areaNameCheck.join(',')
      this.areaCode = _areaCode.join(',')
      this.RushHourData(Object.assign({}, this.getAjaxParams, {areaCodes: this.areaCode}))
      this.$store.dispatch('SetDownLink', Object.assign({}, this.getAjaxParams, {areaCodes: this.areaCode}))
      this.visible = false;
    }
  }
};
</script>

<style lang="less">
.v-rushHour {
  margin: 0 -6px;
  .v-dropdown {
    text-align: right;
  }
  .ivu-dropdown-menu {
    width: 240px;
    padding: 10px 15px;
  }
  .ivu-checkbox-group {
    text-align: left;
  }
  .ivu-card-head p,
  .ivu-card-head-inner {
    height: 32px;
    line-height: 32px;
    font-size: 24px;
  }
  .ivu-card-head {
    padding: 30px 20px;
    border-bottom: none;
  }
}
#rushHour2 {
  width: 100%;
  height: 610px;
}
</style>
